<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTTPS WebXR 测试</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            min-height: 100vh;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }
        
        h1 {
            text-align: center;
            margin-bottom: 30px;
            font-size: 2.5em;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .test-section {
            margin: 20px 0;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .test-title {
            font-size: 1.3em;
            font-weight: 600;
            margin-bottom: 15px;
            color: #fff;
        }
        
        .test-result {
            padding: 10px;
            border-radius: 8px;
            margin: 10px 0;
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: 0.9em;
        }
        
        .success {
            background: rgba(76, 175, 80, 0.3);
            border: 1px solid rgba(76, 175, 80, 0.5);
        }
        
        .error {
            background: rgba(244, 67, 54, 0.3);
            border: 1px solid rgba(244, 67, 54, 0.5);
        }
        
        .warning {
            background: rgba(255, 193, 7, 0.3);
            border: 1px solid rgba(255, 193, 7, 0.5);
        }
        
        .info {
            background: rgba(33, 150, 243, 0.3);
            border: 1px solid rgba(33, 150, 243, 0.5);
        }
        
        .vr-button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: 2px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 15px 30px;
            border-radius: 16px;
            cursor: pointer;
            font-size: 18px;
            font-weight: 600;
            backdrop-filter: blur(20px);
            box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4);
            transition: all 0.3s ease;
            display: block;
            margin: 20px auto;
            text-align: center;
        }
        
        .vr-button:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 12px 40px rgba(102, 126, 234, 0.6);
        }
        
        .back-link {
            display: inline-block;
            margin-top: 30px;
            padding: 12px 24px;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            text-decoration: none;
            border-radius: 12px;
            transition: all 0.3s ease;
        }
        
        .back-link:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔒 HTTPS WebXR 测试</h1>
        
        <div class="test-section">
            <div class="test-title">🌐 连接信息</div>
            <div id="connection-info"></div>
        </div>
        
        <div class="test-section">
            <div class="test-title">🔒 安全上下文检测</div>
            <div id="security-info"></div>
        </div>
        
        <div class="test-section">
            <div class="test-title">🥽 WebXR 支持检测</div>
            <div id="webxr-info"></div>
        </div>
        
        <div class="test-section">
            <div class="test-title">🎮 VR 按钮测试</div>
            <div style="text-align: center;">
                <button id="vr-test-button" class="vr-button">检测中...</button>
            </div>
            <div id="vr-button-status"></div>
        </div>
        
        <div style="text-align: center;">
            <a href="/" class="back-link">← 返回主页面</a>
        </div>
    </div>

    <script>
        // 显示连接信息
        function showConnectionInfo() {
            const info = document.getElementById('connection-info');
            info.innerHTML = `
                <div class="test-result info">
                    协议: ${location.protocol}
                </div>
                <div class="test-result info">
                    主机: ${location.hostname}
                </div>
                <div class="test-result info">
                    端口: ${location.port}
                </div>
                <div class="test-result info">
                    完整URL: ${location.href}
                </div>
            `;
        }
        
        // 检测安全上下文
        function checkSecurityContext() {
            const info = document.getElementById('security-info');
            const isSecure = window.isSecureContext || location.protocol === 'https:' || location.hostname === 'localhost';
            
            info.innerHTML = `
                <div class="test-result ${isSecure ? 'success' : 'error'}">
                    安全上下文: ${isSecure ? '✅ 安全环境' : '❌ 非安全环境'}
                </div>
                <div class="test-result ${location.protocol === 'https:' ? 'success' : 'warning'}">
                    HTTPS协议: ${location.protocol === 'https:' ? '✅ 已启用' : '⚠️ 未启用'}
                </div>
            `;
        }
        
        // 检测WebXR支持
        function checkWebXRSupport() {
            const info = document.getElementById('webxr-info');
            const hasWebXR = 'xr' in navigator;
            
            let webxrDetails = '';
            if (hasWebXR) {
                webxrDetails = `
                    <div class="test-result success">
                        WebXR API: ✅ 支持
                    </div>
                `;
                
                // 检测WebXR会话支持
                navigator.xr.isSessionSupported('immersive-vr').then(supported => {
                    if (supported) {
                        webxrDetails += `
                            <div class="test-result success">
                                VR会话: ✅ 支持
                            </div>
                        `;
                    } else {
                        webxrDetails += `
                            <div class="test-result warning">
                                VR会话: ⚠️ 不支持（可能需要VR设备）
                            </div>
                        `;
                    }
                    info.innerHTML = webxrDetails;
                }).catch(err => {
                    webxrDetails += `
                        <div class="test-result error">
                            VR会话检测失败: ${err.message}
                        </div>
                    `;
                    info.innerHTML = webxrDetails;
                });
            } else {
                webxrDetails = `
                    <div class="test-result error">
                        WebXR API: ❌ 不支持
                    </div>
                `;
            }
            
            info.innerHTML = webxrDetails;
        }
        
        // 测试VR按钮
        function testVRButton() {
            const button = document.getElementById('vr-test-button');
            const status = document.getElementById('vr-button-status');
            const hasWebXR = 'xr' in navigator;
            const isSecure = window.isSecureContext || location.protocol === 'https:' || location.hostname === 'localhost';
            
            if (hasWebXR && isSecure) {
                button.textContent = '🥽 进入VR体验';
                button.onclick = () => {
                    status.innerHTML = '<div class="test-result info">正在尝试启动WebXR会话...</div>';
                    
                    navigator.xr.requestSession('immersive-vr').then(session => {
                        status.innerHTML = '<div class="test-result success">✅ WebXR会话启动成功！</div>';
                        // 立即结束会话（这只是测试）
                        session.end();
                    }).catch(err => {
                        status.innerHTML = `<div class="test-result warning">⚠️ WebXR会话启动失败: ${err.message}<br>这可能是因为没有连接VR设备</div>`;
                    });
                };
                status.innerHTML = '<div class="test-result success">✅ VR按钮功能正常，可以点击测试</div>';
            } else {
                if (!hasWebXR) {
                    button.textContent = '❌ WebXR 不支持';
                    status.innerHTML = '<div class="test-result error">❌ 浏览器不支持WebXR</div>';
                } else if (!isSecure) {
                    button.textContent = '🔒 需要HTTPS连接';
                    status.innerHTML = '<div class="test-result error">❌ 需要安全连接（HTTPS）</div>';
                }
                button.onclick = () => {
                    alert('WebXR功能不可用');
                };
            }
        }
        
        // 页面加载时执行所有测试
        document.addEventListener('DOMContentLoaded', () => {
            showConnectionInfo();
            checkSecurityContext();
            checkWebXRSupport();
            testVRButton();
        });
    </script>
</body>
</html>